<template>
	<view class="container">
		<Header>心得体会</Header>
		<view class="content">
			<view class="title">
				{{ data.title }}
			</view>
			<view class="date">
				<span>{{ data.createtime }}</span>
			</view>
			<view v-html="data.content"></view>
			<view >
				<image :src="url" v-for="(url, index) in data.meet_files" :key="index" mode="aspectFit" style="width: 100%;margin: 5px 0px;"></image>
			</view>
		</view>
	</view>
</template>

<script>
import Header from '../../../components/header.vue'
import request from '../../../common/request.js'
export default {
	components: {
		Header
	},
	data() {
		return {
			id: '',
			data: {}
		}
	},
	onLoad(option) {
		this.id = option.id
	},
	mounted() {
		this.getDetailData()
	},
	methods: {
		getDetailData() {
			request({
				url: '/study/feelDetail',
				data: {
					feel_id: this.id
				},
				method: 'POST'
			}).then(res => {
				if (res.code == 1) {
					this.data = res.data
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					});
				}
			})
		},
	}
}
</script>

<style lang="scss" scoped>
.container {
	/* background-color: #f9f9f9;
		min-height: calc(100vh - 45px); */
}

.content {
	padding: 20px;
	line-height: 30px;
}

.title {
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	line-height: 26px;
}

.date {
	font-size: 14px;
	text-align: center;
	margin: 15px 0px;
}

.bottom {
	/* position: sticky;
		bottom: 10px; */
	margin: 10px 0px;
	display: flex;
	align-items: center;
	justify-content: center;

	.item {
		border: 1px solid #e2e2e2;
		display: inline-block;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0px 15px;

		&.active {
			::v-deep .uni-icons {
				color: #ea5b6a !important;
			}
		}
	}
}

.status {
	color: #fb7a30;
}</style>